/**
* 作者 ：食草狂魔
*
* 日期 ：2017/11/30
*
* 描述 ：目录管理组件 - 添加信息资源
*/
<template>
  <el-container class="is-vertical">
    <HeaderBar :menuState="menuState"></HeaderBar>
    <BreadCrumb :options="breadOptions" class="breadcreamb"></BreadCrumb>
    <el-main class="resMain" v-show="fromShow1">
      <el-steps :active="1" simple class="resStep">
        <el-step title="编辑信息资源内容" icon="el-icon-edit"></el-step>
        <el-step title="编辑信息项内容" icon="el-icon-upload"></el-step>
      </el-steps>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm1" label-width="220px" class="demo-ruleForm resForm">
        <el-form-item label="信息资源分类 :">
          <p>{{ dataTypeTitle }}</p>
        </el-form-item>
        <el-form-item label="提供方名称及代码 :">
          <p>{{ userDepartmentTitle }}</p>
        </el-form-item>
        <el-form-item class="infor" label="信息资源名称 :" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item class="infor inforNum" label="信息资源代码 :">
          <p>{{ ruleForm.code1 }}</p>
          <span>/</span>
          <el-input v-model="ruleForm.code2" placeholder="000000"></el-input>
          <span>/</span>
          <el-input v-model="ruleForm.code3" placeholder="000000"></el-input>
        </el-form-item>
        <el-form-item label="信息资源摘要 :" prop="abstracts">
          <el-input type="textarea" v-model="ruleForm.abstracts"></el-input>
        </el-form-item>
        <el-form-item class="infor" label="信息资源格式 :">
          <el-select v-model="ruleForm.infoResourcFormatId1" placeholder="请选择" @change="resourceFormat1Change">
            <el-option
              v-for="item in resourceFormatData1"
              :label="item.infoResourceFormatName"
              :value="item.infoResourceFormatId">
            </el-option>
          </el-select>
          <el-select v-model="ruleForm.infoResourcFormatId2" placeholder="请选择">
            <el-option
              v-for="item in resourceFormatData2"
              :label="item.infoResourceFormatName"
              :value="item.infoResourceFormatId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="infor" label="关联分类 :">
        	<el-input v-model="ruleForm.relationCodes"></el-input>
        </el-form-item>
        <div class="resources">
          <el-form-item class="infor" label="数据存储总量 :" prop="storageTotal">
            <el-input v-model="ruleForm.storageTotal"></el-input>
            <span class="catalogG">G</span>
          </el-form-item>
          <el-form-item class="infor" label="已共享的数据存储量 :" prop="storageShareNum">
            <el-input v-model="ruleForm.storageShareNum"></el-input>
            <span class="catalogG">G</span>
          </el-form-item>
        </div>
        <div class="resources">
          <el-form-item class="infor" label="已开放的数据存储量 :" prop="storageOpenNum">
            <el-input v-model="ruleForm.storageOpenNum"></el-input>
            <span class="catalogG">G</span>
          </el-form-item>
          <el-form-item class="infor" label="结构化信息记录总数 :" prop="structureRecordTotal">
            <el-input v-model="ruleForm.structureRecordTotal"></el-input>
            <span class="catalogG catalogSlip">万条</span>
          </el-form-item>
        </div>
        <div class="resources">
          <el-form-item class="infor" label="已共享结构化信息记录总数 :" prop="structureRecordShareNum">
            <el-input v-model="ruleForm.structureRecordShareNum"></el-input>
            <span class="catalogG catalogSlip">万条</span>
          </el-form-item>
          <el-form-item class="infor" label="已开放结构化信息记录总数 :" prop="structureRecordOpenNum">
            <el-input v-model="ruleForm.structureRecordOpenNum"></el-input>
            <span class="catalogG catalogSlip">万条</span>
          </el-form-item>
        </div>
        <el-button type="primary" @click="submitForm('ruleForm')" class="elButton moduleButton elRight">下一步</el-button>
        <el-button @click="resetForm('ruleForm')" type="info" class="elButton">取消</el-button>
      </el-form>
    </el-main>
    <el-main class="editMain" v-show="!fromShow1">
      <el-steps :active="2" simple class="editStep">
        <el-step title="编辑信息资源内容" icon="el-icon-edit"></el-step>
        <el-step title="编辑信息项内容" icon="el-icon-upload"></el-step>
      </el-steps>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm2" label-width="100px" class="demo-ruleForm adminForm">
        <MTable :options="tableOptions" ref="myTable" class="tablebar"></MTable>
        <!--<el-button type="primary" @click="returnForm" class="elButton moduleButton elRight">上一步</el-button>-->
        <el-button @click="submitForm2('ruleForm')" class="elButton moduleButton">完成</el-button>
      </el-form>
    </el-main>
    <Dialog :options="dialogOptions">
      <AddCatalogForm slot="dialogContent" :parentModel="viewModel" v-if="dialogOptions.visible"></AddCatalogForm>
    </Dialog>
    <Dialog :options="dialogOptions2">
      <UpdateCatalogForm slot="dialogContent" :parentModel="viewModel" :updateFormData="updateFormData" v-if="dialogOptions2.visible"></UpdateCatalogForm>
    </Dialog>
    <Dialog :options="dialogOptions3">
      <ShowCatalogForm slot="dialogContent" :parentModel="viewModel" :updateFormData="updateFormData" v-if="dialogOptions3.visible"></ShowCatalogForm>
    </Dialog>
  </el-container>
</template>

<script>
    import config from '../../config/config'
    import portalInterfaceAPIs from '../../api/portalInterfaceAPIs'
    import dirAPIs from '../../api/dirAPIs'
    import departmentAPIs from '../../api/departmentAPIs'
    import HeaderBar from '../../components/header/Header.vue'
    import BreadCrumb from '../../components/breadcrumb/BreadCrumb.vue'
    import MTable from '../../components/table/Table.vue'
    import Dialog from '../../components/dialog/Dialog.vue'
    import AddCatalogForm from './components/addCatalogForm/AddCatalogForm.vue'
    import UpdateCatalogForm from './components/updateCatalogForm/UpdateCatalogForm.vue'
    import ShowCatalogForm from './components/showCatalogForm/ShowCatalogForm.vue'

    export default {
    	name:"editResources",
    	components :{
    		HeaderBar,
    		BreadCrumb,
        MTable,
        Dialog,
        AddCatalogForm,
        UpdateCatalogForm,
        ShowCatalogForm
    	},
    	data () {
	      return {
	        title: "目录管理--编辑信息资源内容",
	        menuState: '/catalogManage/main',
	        input: '',
	        value:'',
	        fromShow1:true,
	        breadOptions:{
	        	bread:[
              {
                label:"政务数据资源管理系统",
                path:"/"
              },{
                label:"目录管理",
                path:"/catalogManage/main"
              },{
                label:"编辑信息资源内容",
                path:"/catalogManage/editResources"
              }
	        	]
	        },
          ruleForm: {
	          token: localStorage.token,
            dirId: this.$router.history.current.query.dirId,
            dirTypeId: this.$router.history.current.query.dirTypeId,
            name: "", // 信息资源名称
            code1: this.$router.history.current.query.allDirId,
            code2: "",
            code3: "",
            code: "", // 信息资源代码
            abstracts: "", // 信息资源摘要
            infoResourcFormatId1: "",
            infoResourcFormatId2: "",
            infoResourceFormatId: "", // 信息资源格式
            relationCodes: "", // 关联分类
            storageTotal: "0", // 数据存储总量
            storageShareNum: "0", // 已共享数据存储总量
            storageOpenNum: "0", // 已开放数据存储总量
            structureRecordTotal: "0", // 结构化信息记录总数
            structureRecordShareNum: "0", // 已共享结构化记录总数
            structureRecordOpenNum: "0" // 已开放结构化记录总数
          },
          rules: {
	          name: [
	            { required: true, message: '请填写内容', trigger: 'blur' }
	          ],
	          abstracts: [
	            { required: true, message: '请填写内容', trigger: 'blur' }
	          ],
	          storageTotal: [
	            { required: true, message: '请填写内容', trigger: 'blur' }
	          ],
	          storageShareNum: [
	            { required: true, message: '请填写内容', trigger: 'blur' }
	          ],
	          storageOpenNum: [
	            { required: true, message: '请填写内容', trigger: 'blur' }
	          ],
	          structureRecordTotal: [
	            { required: true, message: '请填写内容', trigger: 'blur' }
	          ],
	          structureRecordShareNum: [
	            { required: true, message: '请填写内容', trigger: 'blur' }
	          ],
	          structureRecordOpenNum: [
	            { required: true, message: '请填写内容', trigger: 'blur' }
	          ]
	        },
          tableOptions: {
            handleSelectionChange (rows) {
            }
          },
          dialogOptions: {
            visible: false,
            title: "添加信息项"
          },
          dialogOptions2: {
            visible: false,
            title: "编辑信息项"
          },
          dialogOptions3: {
            visible: false,
            title: "查看信息项"
          },
          resourceFormatData1: [],
          resourceFormatData2: [],
          dataTypeTitle: "", // 信息资源分类
          userDepartmentTitle: "", // 提供方名称
          infoResourceId: "", // 第一步添加的信息资源ID
          viewModel: this, // 当前作用域
          updateFormData: {},
          tableRows: []
	      }
	    },
	    mounted: function () {
    		let vm = this
        // 加载数据资源分类头信息
        vm.loadDataTypeTitle()
        // 加载当前用户部门信息
        vm.loadUserDepartment()
        // 加载数据资源格式列表
        vm.loadResourceFormatData(0)
        vm.initTable([],1,20,0)
        /**************临时********************/
        vm.loadInfoPropertyData({
          token: localStorage.token,
          infoResourceId: vm.infoResourceId,
          pageNum: 1,
          pageSize: 20
        })
		  },
    	methods: {
        // 加载当前用户部门信息
    	  loadUserDepartment () {
          let vm = this
          departmentAPIs.getDepartmentNamesContainSuper({
            token: localStorage.token
          }).then(({ data }) => {
            vm.userDepartmentTitle = `${data.data.departmentNames}_${data.data.departmentCodes}`
          })
        },
        // 加载数据资源分类头信息
    	  loadDataTypeTitle () {
    	    let vm = this
    	    dirAPIs.getDirNamesContainSuper({
            token: localStorage.token,
            infoDirId: vm.$router.history.current.query.dirId
          }).then(({ data }) => {
            vm.dataTypeTitle = data.data
          })
        },
    	  loadInfoPropertyData (params) {
    	    let vm = this
    	    dirAPIs.infoPropertyList(params).then(({ data }) => {
            if(data.code == 10000) {
//              debugger
              vm.initTable(data.data, 1, 20, data.total)
            }
          })
        },
        resourceFormat1Change (val) {
          let vm = this
          vm.ruleForm.infoResourceFormatId2 = ""
          vm.loadResourceFormatData(val)
        },
        // 加载数据资源格式列表
    	  loadResourceFormatData (parentId) {
    	    let vm = this
          dirAPIs.infoResourceFormatList({
            token: localStorage.token,
            parentId: parentId
          }).then(({ data }) => {
    	      if(data.code == 10000){
              if(parentId != 0){
                vm.resourceFormatData2 = data.data
              }
              else {
                vm.resourceFormatData1 = data.data
              }
            }
          })
        },
	    	submitForm(formName) {
		      let vm = this
	    		vm.$refs.ruleForm1.validate((valid) => {
	          if (valid) {
	          	if(vm.ruleForm.code2.length ==0 || vm.ruleForm.code3.length == 0){
	          		vm.$message.warning("请填写信息资源代码")
	          		return
	          	}else if(vm.ruleForm.infoResourcFormatId2.length == 0){
	          		vm.$message.warning("请选择信息资源格式")
	          		return
	          	}else{
	          		// 只取子格式的值
	          		vm.ruleForm.code = `${vm.ruleForm.code1}/${vm.ruleForm.code2}/${vm.ruleForm.code3}`
	          		vm.ruleForm.infoResourceFormatId = vm.ruleForm.infoResourcFormatId2
	          		dirAPIs.infoResourceInsert(vm.ruleForm).then(({ data }) => {
	          		  if(data.code == 10000){
	          		    return data.data
	          		  }
	          		  else {
	          		    vm.$message.error(data.msg)
	          		  }
	          		}).then(data => {
	          		  if(data&&data.length>0){
	          		    vm.fromShow1 = !vm.fromShow1
	          		    vm.infoResourceId = data
	          		    vm.loadInfoPropertyData({
	          		      token: localStorage.token,
	          		      infoResourceId: vm.infoResourceId,
	          		      pageNum: 1,
	          		      pageSize: 20
	          		    })
	          		  }
	          		})
	          	}
			      } else {
	            return false;
	          }
		     	})
		    },
        resetForm(formName) {
          this.$router.push({path: '/catalogManage/main'});
        },
		    submitForm2(formName) {
          this.$router.push({path: '/catalogManage/main'});
		    },
        returnForm() {
          let vm = this
          vm.fromShow1 = !vm.fromShow1
		    },
        initTable (dataList, pageNo, pageSize, total) {
          let vm = this
          vm.tableOptions = {
            thead: [{
              prop: "propertyName", // 数据的key值
              label: "信息项名称", // 显示的标题
              width: "120" // 列宽
            },{
              prop: "infoPropertyDataTypeName", // 数据的key值
              label: "数据项类型", // 显示的标题
              width: "120" // 列宽
            },{
              prop: "propertyDataLength", // 数据的key值
              label: "数据长度", // 显示的标题
              width: "120" // 列宽
            },{
              prop: "shareType", // 数据的key值
              label: "共享类型", // 显示的标题
              width: "120", // 列宽
              formatter (row, column, cellValue) {
                switch (cellValue) {
                  case 1 :
                    return "不共享"
                    break
                  case 2 :
                    return "有条件共享"
                    break
                  case 3 :
                    return "无条件共享"
                    break
                }
              }
            },{
              prop: "infoPropertyShareModeName", // 数据的key值
              label: "共享方式", // 显示的标题
              width: "120" // 列宽
            },{
              prop: "isOpen", // 数据的key值
              label: "开放类型", // 显示的标题
              width: "120", // 列宽
              formatter (row, column, cellValue) {
                switch (cellValue) {
                  case 1 :
                    return "不开放"
                    break
                  case 2 :
                    return "有条件开放"
                    break
                  case 3 :
                    return "无条件开放"
                    break
                }
              }
            },{
              prop: "openContent", // 数据的key值
              label: "开放条件", // 显示的标题
              width: "120" // 列宽
            },{
              prop: "updateCycle", // 数据的key值
              label: "更新周期", // 显示的标题
              width: "120", // 列宽
              formatter (row, column, cellValue) {
                switch (cellValue) {
                  case 1 :
                    return "实时"
                    break
                  case 2 :
                    return "每日"
                    break
                  case 3 :
                    return "每周"
                    break
                  case 4 :
                    return "每季度"
                    break
                  case 5 :
                    return "每半年"
                    break
                  case 6 :
                    return "每年"
                    break
                  case 7 :
                    return "其他"
                    break
                }
              }
            },{
              prop: "releaseTime", // 数据的key值
              label: "发布日期", // 显示的标题
              width: "120", // 列宽
              formatter (row, column, cellValue) {
                return new Date(parseInt(cellValue)).toLocaleDateString()
              }
            },{
              prop: "description", // 数据的key值
              label: "备注", // 显示的标题
              width: "120" // 列宽
            }],
            operation:{
              fixed: "right",
              width: 150,
              items: [{
                xtype: "link",
                buttonType: "danger", // 按钮样式
                buttonText: "删除",
                style: "color:red;",
                onClick (i, row) {
                  dirAPIs.infoPropertyDelete({
                    token: localStorage.token,
                    key: row.infoPropertyId
                  }).then(({ data }) => {
                    if(data.code == 10000) {
                      vm.$message.success("信息项删除成功！")
                      vm.loadInfoPropertyData({
                        token: localStorage.token,
                        infoResourceId: vm.infoResourceId,
                        pageNum: 1,
                        pageSize: 20
                      })
                    }
                    else{
                      vm.$message.error("信息项删除失败！")
                    }
                  })
                }
              },{
                xtype: "link",
                buttonType: "danger", // 按钮样式
                buttonText: "修改",
                onClick (i, row) {
                  vm.dialogOptions2.visible = true
                  vm.updateFormData = row
                }
              },{
                xtype: "link",
                buttonType: "primary", // 按钮样式
                buttonText: "查看",
                onClick (i, row) {
                  vm.dialogOptions3.visible = true
                  vm.updateFormData = row
                }
              }]
            },
            data: dataList,
            handleSelectionChange (rows) {
              vm.tableRows = rows
            },
            selection: {
              width: 55
            },
            toolbar: [{
              xtype: "toolbarRow",
              items: [{
                xtype: "button",
                buttonType: "primary", // 按钮样式
                buttonText: "添加",
                className: "",
                style:"width:100px;background: #076dc1;margin-right:20px;padding:0",
                onClick () {
                  vm.dialogOptions.visible = true
                }
              },{
                xtype: "button",
                buttonType: "primary", // 按钮样式
                buttonText: "删除",
                className: "",
                style:"width:100px;background: #076dc1;margin-right:20px;padding:0",
                onClick () {
                  let arr = []
                  vm.tableRows.forEach(item => {
                    arr.push(item.infoPropertyId)
                  })
                  dirAPIs.infoPropertyDelete({
                    token: localStorage.token,
                    key: arr.join(",")
                  }).then(({ data }) => {
                    if(data.code == 10000){
                      vm.$message.success("删除信息项成功！")
                      vm.loadInfoPropertyData({
                        token: localStorage.token,
                        infoResourceId: vm.infoResourceId,
                        pageNum: 1,
                        pageSize: 20
                      })
                    }
                    else{
                      vm.$message.error("删除信息项失败！")
                    }
                  })
                }
              },{
                xtype: "button",
                buttonType: "primary", // 按钮样式
                buttonText: "导出",
                className: "",
                containerStyle:"float:right",
                style:"width:100px;background: #076dc1;margin-right:20px;padding:0",
                onClick () {
                  window.open(`${config.siteInfo.sites.file_server_url}/dir/infoResourceExport?token=${localStorage.token}`)
                }
              },{
                xtype: "upload",
                buttonType: "primary", // 按钮样式
                buttonText: "导入",
                containerStyle:"float:right",
                style:"width:100px;background: #076dc1;margin-right:20px;padding:0",
                action: `${config.siteInfo.sites.file_server_url}/dir/infoPropertyImport?token=${localStorage.token}`, //"/test",//`${$config.siteInfo.sites.file_server_url}/dir/infoResourceImport`,
                data: {
                  infoResourceId: vm.infoResourceId,
                  token: localStorage.token
                },
                ref: "uploadBtn",
                onSuccess (response, file, fileList) {
                  // 此处，拿到服务器返回信息，渲染表格数据
                  if(response.code == 10000) {
                    vm.$message.success("导入成功！")
                    vm.loadInfoPropertyData({
                      token: localStorage.token,
                      infoResourceId: vm.infoResourceId,
                      pageNum: 1,
                      pageSize: 20
                    })
                  }
                  else{
                    vm.$message.error("导入失败！")
                  }
                }
              }]
            }]
            }
        }
    	}
    }
</script>

<style>
	.resMain{
		width: 75%;
		line-height: normal;
		margin: 0 auto 90px;
	}
	/*.resMain .resStep .el-step__arrow{
		display: none;
	}*/
	.resStep{
		padding: 0 8%;
		height: 40px;
	}
	.resForm{
		padding: 60px 10% 0 10%;
		border: 1px solid #d8d6d6;
		border-top: none;
	}
	.resForm label{
		font-weight: bold;
	}
	.resForm .el-form-item__content{
		margin-left: 220px !important;
		text-align: left;
	}
	.resForm .el-textarea__inner{
		min-height: 140px !important;
	}
	.resources{
		overflow: hidden;
	}
	.resources .infor{
		width: 50%;
		float: left;
		position: relative;
	}
	.resForm .elRelation{
		width: auto;
	}
	.resources .el-input__inner{
		height: 36px;
	}
	.catalogG{
		width: 36px;
		height: 36px;
		color:#fff;
		display: block;
		font-size: 1.6rem;
		background: #2cace2;
		border-radius: 3px;
		text-align: center;
		line-height: 36px;
		position: absolute;
		top: 4px;
		right: 0;
	}
	.catalogSlip{
		width: 50px;
	}
	.resForm .elButton,.editMain .elButton{
		margin: 40px 0 60px 0;
		width: 112px;
		height: 36px;
	}
	.resForm .elRight,.editMain .elRight{
		margin-right: 60px;
	}
	.inforNum{
		overflow: hidden;
	}
	.inforNum p{
		float: left;
	}
	.inforNum .el-input{
		float: left;
		width: 140px;
	}
	.inforNum span{
		float: left;
	}
	.resForm .el-select{
		float: left;
		width: 140px;
		margin-right: 10px;
	}
	.editMain{
		width: 84%;
		line-height: normal;
		margin: 0 auto 90px;
		padding: 0;
	}
	.editMain .adminForm{
		border: 1px solid #d8d6d6;
		border-top: none;
		padding:30px 5%;
	}
	.editStep{
		padding: 0 8%;
		height: 40px;
	}
	.toolbarItem button{
		width: 84px;
		height: 36px;
	}
</style>
